<template>
  <div class="wh-graph-editor-module"  :class="[showSection?'show-module':'hide-module']">
    <div class="wh-graph-editor-module-wraper" id="stencilContainer" ref="stencilContainer"></div>
    <div class="wh-graph-editor-module-toggle" @click="onClickToggle()">
      <i class="el-icon-arrow-right" v-show="!showSection"></i>
      <i class="el-icon-arrow-left" v-show="showSection"></i>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
import { Stencil } from '@antv/x6-plugin-stencil'
export default {
  props: {
    graph: {
      type: Graph,
      default: null
    },
  },
  data() {
    return {
      showSection: true
    }
  },
  watch: {
    graph: {
      handler (newValue, oldValue) {
        if (newValue) {
          console.log(newValue);
          this.$nextTick(() => {
            this.initModule()
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    onClickToggle() {
      this.showSection = !this.showSection
      this.$emit('toggleSection', 1)
    },
    initModule() {
      const stencil = new Stencil({
        title: '节点库',
        target: this.graph,
        notFoundText: '暂无此节点',
        search: (cell, keyword, groupName, stencil) => {
          if (keyword) {
            return cell.attr('text/text').includes(keyword)
          }
          return true
        },
        collapsable: false,
        stencilGraphWidth: 250,
        stencilGraphHeight: 100,
        placeholder: '请输入节点名称',
        groups: [
          {
            name: 'group1',
            title: '基础节点'
          },
          {
            name: 'group2',
            title: '自定义节点'
          },
        ],
        getDropNode: (sourceNode) => {
          const targetNode = sourceNode.clone()
          console.log(targetNode);
          // targetNode.addPorts([
          //   {
          //     group: 'top',
          //   },
          //   {
          //     group: 'right',
          //   },
          //   {
          //     group: 'bottom',
          //   },
          //   {
          //     group: 'left'
          //   }
          // ])
          return targetNode
        }
      })
      const ports = {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
        },
        items: [
          {
            group: 'top',
          },
          {
            group: 'right',
          },
          {
            group: 'bottom',
          },
          {
            group: 'left',
          },
        ],
      }
      Graph.registerNode(
        'custom-rect',
        {
          inherit: 'rect',
          width: 100,
          height: 40,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            text: {
              fontSize: 12,
              fill: '#262626',
            },
          },
          ports: { ...ports },
        },
        true,
      )

      Graph.registerNode(
        'custom-polygon',
        {
          inherit: 'polygon',
          width: 100,
          height: 40,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            text: {
              fontSize: 12,
              fill: '#262626',
            },
          },
          ports: {
            ...ports,
            items: [
              {
                group: 'top',
              },
              {
                group: 'bottom',
              },
            ],
          },
        },
        true,
      )

      Graph.registerNode(
        'custom-circle',
        {
          inherit: 'circle',
          width: 100,
          height: 40,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            text: {
              fontSize: 12,
              fill: '#262626',
            },
          },
          ports: { ...ports },
        },
        true,
      )

      Graph.registerNode(
        'custom-image',
        {
          inherit: 'rect',
          width: 100,
          height: 40,
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'image',
            },
            {
              tagName: 'text',
              selector: 'label',
            },
          ],
          attrs: {
            body: {
              stroke: '#5F95FF',
              fill: '#5F95FF',
            },
            image: {
              width: 26,
              height: 26,
              refX: 60,
              refY: 12,
            },
            label: {
              refX: 15,
              refY: 19,
              textAnchor: 'left',
              textVerticalAnchor: 'middle',
              fontSize: 12,
              fill: '#fff',
            },
          },
          ports: { ...ports },
        },
        true,
      )
      const r1 = this.graph.createNode({
        shape: 'custom-rect',
        label: '开始',
        attrs: {
          body: {
            rx: 20,
            ry: 26,
          },
        },
      })
      const r2 = this.graph.createNode({
        shape: 'custom-rect',
        label: '过程',
      })
      const r3 = this.graph.createNode({
        shape: 'custom-rect',
        attrs: {
          body: {
            rx: 6,
            ry: 6,
          },
        },
        label: '可选过程',
      })
      const r4 = this.graph.createNode({
        shape: 'custom-polygon',
        attrs: {
          body: {
            refPoints: '0,10 10,0 20,10 10,20',
          },
        },
        label: '决策',
      })
      const r5 = this.graph.createNode({
        shape: 'custom-polygon',
        attrs: {
          body: {
            refPoints: '10,0 40,0 30,20 0,20',
          },
        },
        label: '数据',
      })
      const r6 = this.graph.createNode({
        shape: 'custom-circle',
        label: '连接',
      })
      const imageShapes = [
        {
          label: 'Client',
          image:
            'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
        },
        {
          label: 'Http',
          image:
            'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
        },
        {
          label: 'Api',
          image:
            'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',
        },
        {
          label: 'Sql',
          image:
            'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',
        },
        {
          label: 'Clound',
          image:
            'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',
        },
        {
          label: 'Mq',
          image:
            'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
        },
      ]
      const imageNodes = imageShapes.map((item) =>
        this.graph.createNode({
          shape: 'custom-image',
          label: item.label,
          attrs: {
            image: {
              'xlink:href': item.image,
            },
          },
        }),
      )

      // 需要一个容纳 stencil 的 Dom 容器 stencilContainer
      // console.log(this.$refs.stencilContainer);
      this.$refs.stencilContainer.appendChild(stencil.container)

      stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
      stencil.load(imageNodes, 'group2')
      stencil.resizeGroup('group1', { height: 250 })
      stencil.resizeGroup('group2', { height: 250 })

    }
  },
}
</script>

<style scoped lang="scss">
  .wh-graph-editor-module {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    &-wraper {
      width: 250px;
      height: 100%;
      background: #F5F5F5;
      border-right: 1px solid lightgray;
      box-sizing: border-box;
      position: relative;
    }
    &-toggle {
      width: 30px;
      height: 60px;
      border: 1px solid lightgray;
      border-left: none;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      background: #F5F5F5;
    }
  }
  .show-module {
    left: 0px;
    transition: left 800ms ease-in-out;
  }
  .hide-module {
    left: -250px;
    transition: left 800ms ease-in-out;
  }
</style>
